<template>
	<view>
		<view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }" v-if="homeHeaderPositioning">
			<view class="head" @click="positioning">
				<view class="wlIcon-weizhi size1"></view>
				<view class="city">小石子集市</view>
				<view class="wlIcon-fanhui2 size2"></view>
			</view>
			
			<view class="search" @click="handleSearch('')">
				<image
					class="search-img"
					:src="$staticImagePath('home/search.png')"
				/>
				
				<view class="mo">请输入搜索药品</view>
			</view>
		</view>
		
		<view :style="{ height: headHeight - 20 + 'px', paddingTop: headTop + 'px' }" v-else>
			<view class="search width" @click="handleSearch('')">
				<image
					class="search-img"
					:src="$staticImagePath('home/search.png')"
				/>
				
				<view class="mo">请输入搜索药品</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HeadNavigation",
		data() {
			return {

			};
		},
		props: {
			headHeight: [String, Boolean, Number, Object],
			headTop: [String, Boolean, Number, Object],
			homeHeaderPositioning: [String, Boolean, Number, Object],
			address: [String, Boolean, Number, Object],
			address_id: [String, Boolean, Number, Object],
		},
		methods:{
			handleSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			},
			positioning(){
				console.log(this.address_id,'8888888888');
				this.$wanlshop.to(`/pages/new/positioning/positioning?address_id=${this.address_id}`);
			}
		}
	}
</script>

<style lang="scss">
	.head {
		display: flex;
		align-items: center;
		height: 80rpx;
		padding-left: 25rpx;
		color: #333333;

		.city {
			max-width: 200rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 0 10rpx;
			font-size: 26rpx;
		}

		.size2 {
			font-size: 22rpx;
		}
	}

	.width {
		width: 500rpx !important;
		height: 80rpx !important;
	}

	.search {
		margin-top: 10rpx;
		width: 700rpx;
		background-color: #fff;
		border-radius: 50rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin-left: 25rpx;

		.size3 {
			color: #333;
			margin-left: 36rpx;
			color: #84BD00;
		}

		.mo {
			margin-left: 28rpx;
			font-size: 26rpx;
			color: #999;
		}
	}
	
	.search-img {
		margin-left: 25rpx;
		width: 36rpx;
		height: 40rpx;
	}
</style>